﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title>ZHI博客-文章专栏</title>
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<!--Layui-->
		<link href="${path}/layui/css/layui.css" rel="stylesheet" />
		<!--font-awesome-->
		<link href="${path}/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<!--全局样式表-->
		<link href="${path}/css/global.css" rel="stylesheet" />
		<link href="${path}/css/animate.min.css" rel="stylesheet" />
		<!-- 本页样式表 -->
		<link href="${path}/css/article.css" rel="stylesheet" />
		<link href="${path}/css/blog.css" rel="stylesheet" />
		<!-- JS -->
			<script src="${path}/layui/layui.js"></script>
		<script src="${path}/js/jquery.min.js"></script>


		<script src="${path}/js/global.js"></script>
		<script src="${path}/js/article.js"></script>
		
	</head>

	<body>

		<nav id="h" class="blog-nav layui-header">
			<div class="blog-container">

				<a href="#" class="blog-user" onclick="login()">
					<i class="fa fa-qq"></i>
				</a>

				<a class="blog-logo" href="index.html">ZHI</a>

				<ul class="layui-nav" lay-filter="nav">
					<li class="layui-nav-item">
						<a href="${path}/index.jsp"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/article/into"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/image/into"><i class="fa fa-paper-plane-o fa-fw"></i>&nbsp;杂七杂八</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/timeline/into"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
					</li>
					<li class="layui-nav-item">
						<a href="${path}/action/about/into"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
					</li>
					<span class="layui-nav-bar"></span></ul>

				<a class="blog-navicon" href="javascript:;">
					<i class="fa fa-navicon"></i>
				</a>
			</div>
		</nav>
<!-- 文章主体列表模板 -->
<script  type="text/html" id="articlelist" >
 {{#  layui.each(d.data, function(index, item){ }}
    <div class="article shadow animated zoomIn">
      <div class="article-left">
        <img src="${path}/{{ item.article_temp}}" alt="{{item.article_title}}" />
      </div>
      <div class="article-right">
        <div class="article-title">
	{{# if(item.sort_va>=4) { }}
        <span class="article_is_top">置顶</span> &nbsp;
	{{#  item.sort_va-=4;} }}
	{{# if(item.sort_va>=2) {  }}
        <span class="article_is_yc">原创</span> &nbsp;
	{{#  item.sort_va-=2;} }}
	{{# if(item.sort_va==1){  }}
        <span class="article_is_zz">转载</span> &nbsp;
	{{#  } }}
	
        <a href="${path}/action/article/detail?id={{item.article_id}}">{{item.article_title}}</a></div>
        <div class="article-abstract">{{item.article_remark_content}}</div>
      </div>
      <div class="clear"></div>
      <div class="article-footer">
      <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;{{item.article_date}}</span> 
      <span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp; {{item.user.user_name}}</span> 
      <span><i class="fa fa-tag"></i>&nbsp;&nbsp; 
      <a href="javascript:classifyList({{item.sal.la.lable_id}});">{{item.sal.la.lable_name}}</a></span> 
      <span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;{{item.article_comment_count}}</span> 
      <span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;{{item.article_views}}</span></div></div> 
 {{#  }); }}

</script>		
<script >
layui.use(['flow','jquery', 'laytpl'] ,function(){
	  var flow = layui.flow;
	  var $ = layui.jquery;
	var laytpl = layui.laytpl;
	var count;
	classifyList(0);


	  /*点击排行榜*/
	  $.ajax({
			url: '${path}/action/article/likelist',
			type:'post',
			dataType: 'json',
			success: function(data) {
				var lis=[];
				$.each(data, function(index,item){
					var li='';
					li+='<li><span><i class="layui-badge-rim ';
					switch(index){
						case 0:li+='layui-bg-red">';break;
						case 1:li+='layui-bg-orange">';break;
						case 2:li+='layui-bg-green">';break;
						default:li+='layui-badge-rim">';
					}
					li+=(index+1)+'</i></span> &nbsp;&nbsp;<a href="${path}/action/article/detail?id='+item.article_id+'">';
					li+=item.article_title+'</a></li>'
					lis.push(li);
						/*
						lis.push('<li><span>'
						+'<i class="layui-badge-rim layui-bg-red">'+(index+1)
						+'</i></span> &nbsp;&nbsp;<a href="detail.html">'
						+item.article_title+'</a></li>');*/
					});
			
				$('.blog-module-ul:first').append(lis.join(''));
			}      			
		});
	  /*站长推荐列表*/
	  $.ajax({
	 		url: '${path}/action/article/admlist',
	 		type:'post',
	 		dataType: 'json',
	 		success: function(data) {
	 			var lis=[];
	 			$.each(data, function(index,item){
	 				var li='';
	 				li+='<li>';
	 				 if(item.sort_va>=4) { 
				        	li+='<span class="article_is_top">置顶</span> &nbsp;';
							item.sort_va-=4;
					}
						if(item.sort_va>=2) { 
						li+='<span class="article_is_yc">原创</span> &nbsp;';
							item.sort_va-=2;
					}
					if(item.sort_va==1){ 
						li+='<span class="article_is_zz">转载</span> &nbsp;';
					}
	 				li+='<a href="${path}/action/article/detail?id='+item.article_id+'">'+item.article_title+'</a></li>';
	 				lis.push(li);
	 				});
	 		
	 			$('.blog-module-ul:last').append(lis.join(''));
	 		}      			
	 	});	
});
</script>
		<div class="blog-body">

			<div class="blog-container">
				<blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow" style="visibility: visible;">
					<a href="index.html" title="网站首页">网站首页<span class="layui-box">&gt;</span></a>
					<a><cite>文章专栏</cite></a>
				</blockquote>
				<div class="blog-main">
				<div id="searchA" class="blog-main-left animated slideInLeft">
				<div id="parentArticleList" >
						
					</div>
				</div>
					

					<div class="blog-main-right">

						<div class="blog-search animated fadeInRight">
							<div class="layui-form-item">
								<div class="search-keywords  shadow">
									<input type="text" id="keywords" name="keywords" lay-filter="searchInput" lay-verify="required" placeholder="输入关键词搜索" autocomplete="off" class="layui-input">
								</div>
								<div class="search-submit  shadow">
									<a class="search-btn" lay-submit="searchForm" lay-filter="searchForm"><i class="fa fa-search"></i></a>
								</div>
							</div>
						</div>

						<div class="article-category shadow categoryOut">
							<div class="article-category-title">分类导航</div>
							<!-- 分类导航后台数据循环展示 -->
							<c:forEach var="item" items="${lableList}">
								<a id="title${item.lable_id }" href="javascript:classifyList(${item.lable_id });">${item.lable_name}</a>
							
							</c:forEach>
						
					
							<div class="clear"></div>
						</div>

						<div class="layui-tab layui-tab-brief shadow animated fadeInRight" lay-filter="docDemoTabBrief">
							<ul class="layui-tab-title">
								<li class="layui-this">点击排行</li>
								<li>站长推荐</li>
							</ul>
							<div class="layui-tab-content">
								<div class="layui-tab-item layui-show">
									<ul class="blog-module-ul">
								

									</ul>
								</div>
								<div class="layui-tab-item">
									<ul class="blog-module-ul">
										
									</ul>
								</div>
							</div>
						</div>

						<div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>

		<footer id="f" class="blog-footer">
			<p><span>Copyright</span><span>©</span><span>2019</span>
				<a href="${path}/index.jsp">ZHI博客</a><span>Design By ZHI TEAM</span></p>
			<p>
				<a href="${path}/index.jsp" target="_blank">小学期课题</a>
			</p>
		</footer>

		<ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
			<li class="layui-nav-item">
				<a href="${path}/index.jsp"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/article/into"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/image/into"><i class="fa fa-paper-plane-o fa-fw"></i>&nbsp;杂七杂八</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/timeline/into"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
			</li>
			<li class="layui-nav-item">
				<a href="${path}/action/about/into"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
			</li>
			<span class="layui-nav-bar"></span>
		</ul>

		<div class="blog-share layui-hide shareOut">
			<div class="blog-share-body">
				<div style="width: 200px;height:100%;">
					<div class="bdsharebuttonbox bdshare-button-style0-32" data-bd-bind="1533783925417">
						<a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
						<a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
						<a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
						<a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
					</div>
				</div>
			</div>
		</div>

		<div class="blog-mask animated layui-hide"></div>


	</body>

</html>